<template>
	<div
		class="steps"
	>
		<div class="step">
			<div class="index">①</div>
			<div class="name">适用玩具</div>
			<div class="desc">
				<div
					v-for="(toy,i) in course.adaptToys"
					:key='toy.name'
				>
					{{toy.name}}{{i === course.adaptToys.length-1 ? '' : '、'}}
				</div>
			</div>
		</div>
		<div class="step">
			<div class="index">②</div>
			<div class="name">玩具尺寸</div>
			<div class="desc">{{course.size}}</div>
		</div>
		<div class="step">
			<div class="index">③</div>
			<div class="name">所需材料</div>
			<div class="desc materials">
				<div
					class="material"
					v-for="(item,i) in course.materials"
					:key="item.name"
					@click="onclickMaterial(item)"
				>
					<div class="label">{{i+1}}、{{item.name}}</div>
					<Tag
						bgColor="#EFF3F3"
						width="195px"
						height="195px"
					>
						<img
							:style="{
								'cursor': item.clickCb ? 'pointer' : 'default'
							}"
							:src="item.img"
						>
					</Tag>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  props: {
    course: Object,
  },
  methods: {
    onclickMaterial(item) {
      item.clickCb && item.clickCb()
    }
  }
}
</script>

<style lang='scss' scoped>
.steps {
  .step {
    position: relative;
    padding: 0 0 36px 30px;

    .index {
      position: absolute;
      left: 0;
    }

    &:not(:last-of-type) .index::after {
      position: absolute;
      top: 30px;
      left: 10px;
      width: 1px;
      height: calc(100% + 36px);
      content: '';
      border-left: 1px dashed #003e34;
    }

    .name,
    .index {
      font-size: 22px;
      color: #01937c;
    }

    .desc {
      display: flex;
      margin-top: 20px;
      font-size: 19px;
      color: #003e34;

      .material {
        margin-right: 25px;

        .label {
          margin-bottom: 15px;
          font-size: 19px;
          color: #003e34;
        }
      }
    }
  }
}
</style>
